<template>
  <div>
    <a-card class="ant-card">
      <a-card-grid
        v-for="(item, index) in data"
        :key="index"
        class="ant-card-grid"
      >
        <a-card
          class="card-item"
          :style="item.style"
        >
          <!-- <template v-if="item.sourceUrl">
            <a-image
              :alt="item.title"
              :src="item.sourceUrl"
              :preview="false"
              :style="{height:'200px'}"
            />
          </template> -->
          <a-button
            class="serial-number"
            shape="circle"
            size="large"
            @click="clickItem(item)"
          >{{index+1}}</a-button>
          <a-card-meta :title="item.title">
            <template #description>{{strCutOffX(item.description)}}</template>
          </a-card-meta>
        </a-card>
        <!-- Content -->
      </a-card-grid>
    </a-card>
  </div>
</template>

<script>
import { strCutOff } from '@/assets/js/string.js'
import { IsPC } from "@/assets/js/device.js";
export default {
  props:{
    data:{
      type:Array,
      default:()=>[]
    }
  },
  data(){
    return{
      strCutOffX:(str)=>strCutOff(str, IsPC()?60:15, '……')
    }
  },
  mounted(){
    if(document.querySelector(".ant-card-grid")){
      if(!IsPC()){
        document.querySelectorAll(".ant-card-grid").forEach(item=>{
          item.style.width = '100%'
        })
      }
    }
  },
  methods:{
    clickItem(item){
      this.$emit("clickItem",item)
    }
  }
}
</script>

<style lang="less" scoped>
.ant-card {
  margin: 15px;
  background: transparent;
  .ant-card-grid {
    width: 33%;
    text-align: center;
    .card-item {
      max-height: 200px;
      .serial-number {
        margin: 15px;
        font-size: 40px;
        height: 80px;
        width: 80px;
        border: 2px solid rgb(54, 53, 53);
      }
    }
  }
}
</style>